<template>
    <view class="content">
		<view class="login-bg">
			<image class="login-img" src="../../static/login-bg.png"></image>
			<text class="login-title">监测系统</text>
		</view>
        <view class="login-container">
            <view class="input-row border">
				<uni-icons type="contact-filled" size="24" color="#999"></uni-icons>
                <m-input class="m-input" type="text" clearable focus v-model="account" placeholder="账号"></m-input>
            </view>
            <view class="input-row border">
			   <uni-icons type="locked-filled" size="24" color="#999"></uni-icons>
                <m-input type="password" displayable v-model="password" placeholder="密码"></m-input>
            </view>
			<view class="input-row">
				<checkbox-group>
					<label class="check-label">
						<checkbox :value="true" :checked="checkStatus" color="#0FD893" style="transform:scale(0.65)"/>
						记住密码
					</label>
				</checkbox-group>
				
			</view>
			<view class="btn-row">
			    <button type="primary" class="primary-login" @tap="bindLogin">登录</button>
			</view>
        </view>
    </view>
</template>

<script>
    import service from '../../service.js';
    import {  mapState, mapMutations } from 'vuex'
    import mInput from '../../components/m-input.vue'
	
    export default {
        components: {
            mInput
        },
        data() {
            return {
                account: 'test123',
                password: '111111',
				checkStatus: false,
                positionTop: 0
            }
        },
        computed: mapState(['forcedLogin']),
        methods: {
            ...mapMutations(['login']),
          
            initPosition() {
                /**
                 * 使用 absolute 定位，并且设置 bottom 值进行定位。软键盘弹出时，底部会因为窗口变化而被顶上来。
                 * 反向使用 top 进行定位，可以避免此问题。
                 */
                this.positionTop = uni.getSystemInfoSync().windowHeight - 100;
            },
            bindLogin() {
                /**
                 * 客户端对账号信息进行一些必要的校验。
                 * 实际开发中，根据业务需要进行处理，这里仅做示例。
                 */
                if (this.account.length < 5) {
                    uni.showToast({
                        icon: 'none',
                        title: '账号最短为 5 个字符'
                    });
                    return;
                }
                if (this.password.length < 6) {
                    uni.showToast({
                        icon: 'none',
                        title: '密码最短为 6 个字符'
                    });
                    return;
                }
                /**
                 * 下面简单模拟下服务端的处理
                 * 检测用户账号密码是否在已注册的用户列表中
                 * 实际开发中，使用 uni.request 将账号信息发送至服务端，客户端在回调函数中获取结果信息。
                 */
                const data = {
                    account: this.account,
                    password: this.password
                };
                const validUser = true
				// service.getUsers().some(function (user) {
    //                 return data.account === user.account && data.password === user.password;
    //             });
                if (validUser) {
                    this.toMain(this.account);
                } else {
                    uni.showToast({
                        icon: 'none',
                        title: '用户账号或密码不正确',
                    });
                }
            },
			
           
            toMain(userName) {
                this.login(userName);
                /**
                 * 强制登录时使用reLaunch方式跳转过来
                 * 返回首页也使用reLaunch方式
                 */
                if (this.forcedLogin) {
                    uni.reLaunch({
                        url: '../main/main',
                    });
                } else {
                    uni.reLaunch(
						{
						    url: `../main/main`
						}
					);
                }

            }
        },
        onReady() {
            this.initPosition();
        }
    }
</script>

<style>
	.content {
		display: flex;
		flex: 1;
		flex-direction: column;
		background-color: #ffffff;
		// padding: 20upx;
	}
	
	.login-bg {
		position: relative;
	}
	.login-title {
		position: absolute;
		left: 50%;
		bottom: 15%;
		color: #0FD893;
		font-size: 24px;
		font-weight: 500;
		transform: translateX(-50%);
	}
	.login-img {
		width: 100%;
		height: 575upx;
	}
	
	.login-container {
		padding: 0upx 60upx;
	}
	
	
    .action-row {
        display: flex;
        flex-direction: row;
        justify-content: center;
    }

    .action-row navigator {
        color: #007aff;
        padding: 0 20upx;
    }

    .oauth-row {
        display: flex;
        flex-direction: row;
        justify-content: center;
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
    }

    .oauth-image {
        width: 100upx;
        height: 100upx;
        border: 1upx solid #dddddd;
        border-radius: 100upx;
        margin: 0 40upx;
        background-color: #ffffff;
    }

    .oauth-image image {
        width: 60upx;
        height: 60upx;
        margin: 20upx;
    }
	
	.check-label {
		font-size: 14px;
		color: #24BA97;
	}
	
	.primary-login {
		background: #24BA97 !important;
		border-radius: 18px;
		font-size: 16px;
	}
</style>
